<template>
  <!--<div>{{ $t('route.lang') }}</div>-->
  <div class="m-header">
    <div class="layout-1">
      <div class="img">
        <img src="../../../assets/logo.png">
      </div>
    </div>
    <div class="layout-2">
      <div class="item-1">
        <el-popover
          class="m-userNamePopo"
          ref="userPopo"
          placement="top-start"
          width="80"
          :visible-arrow="false"
          trigger="hover"
        >
          <div class="userNamePopo">
            <div @click="resetPwdDialog.show= true">修改密码</div>
            <div @click="loginOut">退出登陆</div>
          </div>
        </el-popover>
        <div v-popover:userPopo>{{realName}},欢迎您 <i class="el-icon-arrow-down"></i></div>
      </div>

      <div class="item-3" @click="toggleFull">
        <svg-icon icon-class="full"></svg-icon>
      </div>
      <div class="item-2" v-if="$store.state.app.errorLog.length>0">
        <el-popover
          ref="errorPopo"
          placement="top-end"
          width="347"
          trigger="hover"
        >
          <div class="m-errorLog" v-for="item in $store.state.app.errorLog" :key="item.track">
            <div class="item">
              <div class="info">
                <div>跟踪号：{{item.track}}</div>
                <div class="time">{{item.time}}</div>
              </div>
              <el-button
                type="text"
                v-clipboard:copy="item.track"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              >复制</el-button>
            </div>
          </div>
        </el-popover>
        <svg-icon v-popover:errorPopo icon-class="errorIcon" class="errorIcon"></svg-icon>
      </div>
    </div>
    <el-dialog title="修改密码" :visible.sync="resetPwdDialog.show" width="400px" class="m-dialog"
               :close-on-click-modal="false" :close-on-press-escape="false"  @close="closeRefresetPwd">
      <el-form :model="resetPwdDialog.form" :rules="resetPwdDialog.rules" ref="refresetPwd" :inline="true" label-position="left" label-width="100px">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input v-model="resetPwdDialog.form.oldPwd" type="password" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="resetPwdDialog.form.newPwd" type="password" placeholder="6到8位字母或/和数字构成"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="agenewPwd">
          <el-input v-model="resetPwdDialog.form.agenewPwd" type="password" placeholder="6到8位字母或/和数字构成"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetPwdDialog.show=false">取消</el-button>
        <el-button type="primary" @click="resetPwd">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import screenfull from 'screenfull'
  import * as UserAPI from '@/Api/user'
  export default {
    name: 'TheHeader',
    data () {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.resetPwdDialog.form.newPwd) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      };
      return {
          resetPwdDialog:{
              show:false,
              form:{
                oldPwd:'',
                newPwd:'',
                agenewPwd:'',
              },
              rules:{
                oldPwd:[
                    {required: true, trigger: 'blur', message: '内容不能为空'}
                    ],
                newPwd:[
                    {required: true, trigger: 'blur', message: '内容不能为空'},
                    {pattern: /^[a-zA-Z0-9]{6,8}$/, trigger: "blur", message: "密码格式有误",}
                    ],
                agenewPwd:[
                    {required: true, trigger: 'blur', message: '内容不能为空'},
                    { validator: validatePass, trigger: 'blur' }
                    ],
              }
          }
      }
    },
    computed: {
      realName() {
        return this.$store.state.app.userInfo.realName
      }
    },
    methods: {
      loginOut() {
        this.$confirm('确认登出系统?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            UserAPI.signOut()
              .then(res => {
                if (res.code != 0) {
                  this.$notify({
                    title: '温馨提示',
                    message: res.msg,
                    type: 'warning'
                  })
                  return;
                }
                this.$message({
                  title: '温馨提示',
                  message: '登出成功',
                  type: 'success'
                });
                this.$router.push({name:'Login'})
              })
              .catch(error => {
                console.log(error)
                this.$router.push({name:'Login'})
              })
          })
      },
      resetPwd(){
        this.$refs.refresetPwd.validate(flg => {
            if (!flg) {
              return;
            }
          UserAPI.userMdfPwd(this.resetPwdDialog.form)
            .then(res => {
              if (res.code != 0) {
                this.$notify({
                  title: '温馨提示',
                  message: res.msg,
                  type: 'warning'
                })
                return;
              }
              this.resetPwdDialog.show = false;
              this.$message({
                message: '密码修改成功',
                type: 'success'
              });
            })
            .catch(error => {
              console.log(error)
            })
        })
      },
      closeRefresetPwd() {
          this.$refs.refresetPwd.resetFields();
      },
      onCopy() {
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      },
      onError() {
        this.$message({
          message: '复制失败',
          type: 'warning'
        });
      },
      toggleFull() {
        if (!screenfull.enabled) {
          this.$message({
            message: '你的浏览器不支持全屏浏览',
            type: 'warning'
          })
          return false
        }
        screenfull.toggle()
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../scss/variables";

  .m-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: $--font-size-base;
    .layout-1 {
      margin-top: 10px;
      .img {
        height: 40px;
        overflow: hidden;
        img {
          height: 40px;
          width: auto;
        }
      }
    }
    .layout-2 {
      color: #fff;
      padding-right: 6px;
      display: flex;
      align-items: center;
      .item-1 {
        cursor: pointer;
      }
      .errorIcon {
        position: relative;
        top:3px;
        font-size: 24px;
        margin-left: 30px;
      }
      .item-3 {
        position: relative;
        cursor: pointer;
        top: 3px;
        margin-left: 15px;
        font-size: 20px;
        opacity: .7;
      }
    }
  }
  .userNamePopo {
    text-align: center;
    line-height: 30px;
    div {
      cursor: pointer;
    }
  }
  .m-errorInfo{
    position: fixed;
    top: 70px;
    right: 45px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    z-index: 999;
    padding: 0 5px;
  }
</style>
